<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>分类界面</title>
		<meta name="keywords" content="余弦相似分类">
		<meta name="description" content="余弦相似分类">

		<!-- 新 Bootstrap 核心 CSS 文件 -->
		<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

		<!-- 可选的Bootstrap主题文件（一般不用引入） -->
		<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

		<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
		<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

		<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
		<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

		<style>
			.label {
				font-size: 15px;
			}
			
			button {
				width: 100px;
				font-size: 18px;
			}
			
			.progress {
				margin-top: 20px;
			}
			
			.panel {
				margin-top: 10px;
			}
			
			* {
				font-family: "微软雅黑";
			}
		</style>
	</head>

	<body>
		<div class="container">
			<div class="text-center">
				<h4 style="font-family: 微软雅黑;">待分类文本输入框</h4></div>
			<div class="form-group">
				<textarea id="content" class="form-control" rows="10"></textarea>
			</div>
			<div class="text-right">
				<button type="button" id="classify" class="btn btn-info">分类</button>
			</div>
			<div id="result" class="panel panel-primary">
				<div class="panel-heading">
					分类结果：
				</div>
				<div class="panel-body">
				</div>
			</div>
			<div id="myTabs">
                <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active"><a href="#sports" aria-controls="sports" role="tab" data-toggle="tab">体育类训练集</a></li>
                    <li role="presentation"><a href="#finance" aria-controls="finance" role="tab" data-toggle="tab">财经类训练集</a></li>
                    <li role="presentation"><a href="#travel" aria-controls="travel" role="tab" data-toggle="tab">旅游类训练集</a></li>
                    <li role="presentation"><a href="#politics" aria-controls="politics" role="tab" data-toggle="tab">时政类训练集</a></li>
                </ul>

                <!-- Tab panes -->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="sports">体育类</div>
                    <div role="tabpanel" class="tab-pane" id="finance">财经类</div>
                    <div role="tabpanel" class="tab-pane" id="travel">旅游类</div>
                    <div role="tabpanel" class="tab-pane" id="politics">时政类</div>
                </div>

            </div>
		</div>
		<script>
			$(function(){
				$('#result .panel-body').html();
				$('#result .panel-heading').html("分类结果：");
				$.ajax({
	                url:"getClassify",
	                type:"GET",
	                dataType:"json",
	                data:"classify=" + '体育',
	                success:function(data){
	                    var text = "";
	                    for(var i = 0; i < data.length; i+=2){
	                        text += "<div class='row'><span class='col-md-6'><a href=\"" + data[i].baseUrl + "\">" + data[i].title + "</a></span><span class='col-md-6'><a href=\"" + data[i].baseUrl + "\">" + data[i].title + "</a></span></div>"
	                    }
	                    $('.tab-content .active').html(text);
	                }
	            });
			});
				$('#myTabs a').click(function(e) {
					e.preventDefault();
					//发送AJAX请求分类的信息
					var url = console.log(this);
					console.log(/#.*/g.exec(this.innerHTML));
					var classify = /.{2}/g.exec(this.innerHTML);
					$.ajax({
						url:"getClassify",
						type:"POST",
						dataType:"json",
						data:"classify=" + classify,
						success:function(data){
							var text = "";
							for(var i = 0; i < data.length; i+=2){
								text += "<div class='row'><span class='col-md-6'><a href=\"" + data[i].baseUrl + "\">" + data[i].title + "</a></span><span class='col-md-6'><a href=\"" + data[i].baseUrl + "\">" + data[i].title + "</a></span></div>"
							}
							$('.tab-content .active').html(text);
						}
					});
					$(this).tab('show');
				});
				
				$('#content').focus(function(e){
					$('#result .panel-body').html();
					$('#result .panel-heading').html("分类结果：");
				});
				
				$('#classify').click(function(e){
					var content = $('#content').val();
					if(content.trim() == '') return;
					$.ajax({
	                    url:"getResult",
	                    type:"POST",
	                    dataType:"json",
	                    data:"content=" + content,
	                    success:function(data){
	                       $('#result').show();
	                       var sports = data.sports * 100;
	                       var finance = data.finance * 100;
	                       var politics = data.politics * 100;
	                       var travel = data.travel * 100;
	                       var text = "<span class='label label-success'>体育类概率：</span>"+
	                       "<div class='progress'><div class='progress-bar progress-bar-success progress-bar-striped' role='progressbar' aria-valuenow='" + sports +"' aria-valuemin='0' aria-valuemax='100' style='width: " + sports + "%'>" + sports + "%</div></div>" + 
	                       "<span class='label label-info'>财经类概率：</span>" + 
	                       "<div class='progress'><div class='progress-bar progress-bar-info progress-bar-striped' role='progressbar' aria-valuenow='" + finance + "' aria-valuemin='0' aria-valuemax='100' style='width: " + finance + "%'>" + finance + "%</div></div>" +
	                       "<span class='label label-warning'>时政类概率：</span>" + 
	                       "<div class='progress'><div class='progress-bar progress-bar-warning progress-bar-striped' role='progressbar' aria-valuenow='" + politics + "' aria-valuemin='0' aria-valuemax='100' style='width: " + politics + "%'>" + politics + "%</div></div>" + 
	                       "<span class='label label-danger'>旅游类概率：</span>" + 
	                       "<div class='progress'><div class='progress-bar progress-bar-danger progress-bar-striped' role='progressbar' aria-valuenow='" + travel + "' aria-valuemin='0' aria-valuemax='100' style='width: " + travel + "%'>" + travel + "%</div></div>";
	                    	$('#result .panel-body').html(text);
	                    	$('#result .panel-heading').html("分类结果：" + data.classify);
	                    }
	                });
				});
		</script>
	</body>

</html>